<template>
    <div>
        <el-form :inline="true" :model="adminSearchParam" class="demo-form-inline">
            <el-form-item>
                <el-input
                    clearable
                    v-model="adminSearchParam.loginName"
                    placeholder="登录名称"
                />
            </el-form-item>
            <el-form-item>
                <el-select clearable v-model="adminSearchParam.roleUuid" placeholder="请选择角色">
                    <el-option v-for="role in data.roles" :key="role.uuid" :label="role.name"
                               :value="role.uuid"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select
                    clearable
                    v-model="adminSearchParam.disabled"
                    placeholder="请选择状态"
                >
                    <el-option label="启用" value="false"/>
                    <el-option label="禁用" value="true"/>
                </el-select>
            </el-form-item>
            <el-form-item style="width: auto">
                <el-button type="primary" size="small" @click="search">查询</el-button>
                <el-button type="primary" size="small" @click="addView(null)">添加管理员</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="data.admins" border style="width: 100%" v-loading="data.loading"
                  element-loading-text="拼命加载中">
            <el-table-column prop="loginName" label="登录名称" align="center" width="150px"/>
            <el-table-column prop="disabled" label="状态" align="center" width="150px">
                <template #default="scope">
                    <el-tag
                        :type="scope.row.disabled === false ? 'success' : 'danger'"
                        disable-transitions
                    >{{ scope.row.disabled === false ? "启用" : "禁用" }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="roleName" label="角色名称" align="center" width="150px"/>
            <el-table-column
                prop="createTime"
                label="创建时间"
                width="180"
                align="center"
            >
            </el-table-column>
            <el-table-column
                prop="updateTime"
                label="更新时间"
                width="180"
                align="center"
            >
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="300" align="center">
                <template #default="scope">
                    <el-button
                        class="button-space"
                        @click="addView(scope.row)"
                        type="info"
                        size="small"
                    >编辑
                    </el-button>
                    <el-button
                        class="button-space"
                        @click="enableAdmin(scope.row.uuid)"
                        v-if="scope.row.disabled"
                        type="success"
                        size="small"
                    >启用
                    </el-button>
                    <el-button
                        class="button-space"
                        @click="disableAdmin(scope.row.uuid)"
                        v-if="!scope.row.disabled"
                        type="warning"
                        size="small"
                    >禁用
                    </el-button>
                    <el-popconfirm
                        title="你确定要删除该管理员吗？"
                        confirm-button-text="是"
                        cancel-button-text="否"
                        @confirm="deleteAdmin(scope.row.uuid)"
                    >
                        <template #reference>
                            <el-button
                                class="button-space"
                                type="danger"
                                size="small"
                            >删除
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 添加或修改管理员-->
        <el-dialog :title="data.title" v-model="data.adminAddOrUpdateDisable" draggable>
            <el-form :model="adminAddOrUpdateData" :rules="rules" ref="addFormRef">
                <el-form-item label="登录名称" label-width="130px" prop="loginName">
                    <el-input v-model="adminAddOrUpdateData.loginName" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="角色" label-width="130px" prop="roleUuid">
                    <el-select clearable v-model="adminAddOrUpdateData.roleUuid" placeholder="请选择角色">
                        <el-option v-for="role in data.roles" :key="role.uuid" :label="role.name"
                                   :value="role.uuid"/>
                    </el-select>
                </el-form-item>
                <el-form-item label-width="130px">
                    <el-button @click="data.adminAddOrUpdateDisable = false">取 消</el-button>
                    <el-button type="primary" @click="addOrUpdateAdmin">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import {page, add, update, enable, disable, deleted} from "@/api/admin/admin";
import {reactive, onMounted, ref} from "vue";
import {all} from "@/api/role/role";
import {ElMessage} from "element-plus";

export default {
    setup() {
        const data = reactive({
            admins: [],
            total: 0,
            adminAddOrUpdateDisable: false,
            title: '',
            adminUpdateUuid: '',
            roles: []
        })
        const adminSearchParam = reactive({
            page: 1,
            size: 10,
            loginName: '',
            disabled: '',
            roleUuid: ''
        })
        const adminAddOrUpdateData = reactive({
            loginName: '',
            roleUuid: ''
        })
        const addFormRef = ref(null);
        const rules = reactive({
            loginName: [
                {
                    required: true,
                    message: "请输入登录名称",
                    trigger: "blur",
                },
            ],
            roleUuid: [
                {
                    required: true,
                    message: "请选择角色",
                    trigger: "blur",
                },
            ]
        })
        /**
         * 分页查询管理员
         */
        const pageSearchAdmin = () => {
            page(adminSearchParam).then(res => {
                data.admins = res.data.records
                data.total = res.data.total
            })
        }
        const addView = (row) => {
            data.adminAddOrUpdateDisable = true
            if (row != null) {
                data.title = '编辑管理员'
                adminAddOrUpdateData.loginName = row.loginName
                adminAddOrUpdateData.roleUuid = row.roleUuid
                data.adminUpdateUuid = row.uuid
            } else {
                data.title = '添加角色'
                reset()
            }
        }
        /**
         * 重置管理员添加数据
         */
        const reset = () => {
            adminAddOrUpdateData.loginName = ''
            adminAddOrUpdateData.roleUuid = ''
            data.adminUpdateUuid = ''
        }
        /**
         * 获取全部角色
         */
        const allRole = () => {
            all().then(res => {
                data.roles = res.data
            })
        }
        const addOrUpdateAdmin = () => {
            addFormRef.value.validate((valid) => {
                if (!valid) {
                    return false
                }
                if (data.adminUpdateUuid) {
                    update(adminAddOrUpdateData, data.adminUpdateUuid).then(() => {
                        ElMessage({
                            message: '修改成功',
                            type: 'success',
                        })
                        data.adminAddOrUpdateDisable = false
                        pageSearchAdmin()
                    })
                } else {
                    // 添加
                    add(adminAddOrUpdateData).then(() => {
                        ElMessage({
                            message: '添加成功',
                            type: 'success',
                        })
                        data.adminAddOrUpdateDisable = false
                        pageSearchAdmin()
                    })
                }
            })
        }
        /**
         * 搜索查询
         */
        const search = () => {
            adminSearchParam.page = 1
            pageSearchAdmin()
        }
        /**
         * 启用管理员
         * @param uuid
         */
        const enableAdmin = (uuid) => {
            enable(uuid).then(() => {
                ElMessage({
                    message: '启用成功',
                    type: 'success',
                })
                pageSearchAdmin()
            })
        }
        /**
         * 禁用管理员
         * @param uuid
         */
        const disableAdmin = (uuid) => {
            disable(uuid).then(() => {
                ElMessage({
                    message: '禁用成功',
                    type: 'success',
                })
                pageSearchAdmin()
            })
        }
        /**
         * 删除管理员
         * @param uuid
         */
        const deleteAdmin = (uuid) => {
            deleted(uuid).then(() => {
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
                pageSearchAdmin()
            })
        }
        onMounted(() => {
            pageSearchAdmin()
            allRole()
        })
        return {
            data,
            adminSearchParam,
            adminAddOrUpdateData,
            addFormRef,
            rules,
            addView,
            addOrUpdateAdmin,
            search,
            enableAdmin,
            disableAdmin,
            deleteAdmin
        }
    }
}
</script>